<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    />
    <AllocRole
      v-if="allocRoleVisible"
      @refreshTable="refreshTable"
      :visible.sync="allocRoleVisible"
      :user-attr="userAttr"
    />
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import AllocRole from './components/AllocRole'
import { findUsers } from '@/api/permission'
import { typeMap } from '@/utils/format'
import formatter from '@/utils/format'
export default {
  components: { TableSearch, AllocRole },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
  },
  data() {
    return {
      searchPath: '/web/permission-management',
      form: {
        mobile: '',
        showName: '',
        systemUserType: '',
        userName: '',
      },
      formItemsInline: [
        {
          type: 'text',
          value: 'userName',
          placeholder: '请输入用户账号进行查询',
          clearable: true,
          resourceId: '/web/permission-management',
        },
        {
          type: 'text',
          value: 'mobile',
          placeholder: '请输入手机号进行查询',
          clearable: true,
          resourceId: '/web/permission-management',
        },
        {
          type: 'text',
          value: 'showName',
          placeholder: '请输入角色名称进行查询',
          clearable: true,
          resourceId: '/web/permission-management',
        },
        {
          type: 'select',
          value: 'systemUserType',
          placeholder: '用户类型',
          clearable: true,
          options: typeMap.selectOptions(
            ['ADMIN', 'SELF_OPERATION_ADMIN', 'NORMAL_USER'],
            'userType'
          ),
        },
      ],
      columns: [
        {
          label: '用户账号',
          prop: 'userName',
          resourceId: '/web/permission-management',
        },
        {
          label: '手机号',
          prop: 'mobile',
          resourceId: '/web/permission-management',
        },
        {
          label: '用户状态',
          prop: 'userStatus',
          resourceId: '/web/permission-management',
          formatter,
        },
        {
          label: '所选角色',
          prop: 'systemUserRole.showName',
          resourceId: '/web/permission-management',
        },
        {
          label: '用户类型',
          prop: 'systemUserRole.userType',
          formatter,
        },
        {
          label: '操作',
          resourceId: '/web/permission-management',
          buttons: [
            {
              label: '分配角色',
              class: 'table-button-green',
              size: 'small',
              click: this.handleAlloc,
            },
          ],
        },
      ],
      tableData: {},
      allocRoleVisible: false,
      userAttr: {},
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.form = {
        mobile: '',
        showName: '',
        systemUserType: '',
        userName: '',
      }
    },
    handleTableData(params) {
      findUsers(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    handleAlloc(val) {
      this.allocRoleVisible = true
      this.userAttr = val
    },
  },
}
</script>
